<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入css样式表 -->
    <link rel="stylesheet" href="./style.css">
    <!-- 引入封装的ajax函数 -->
    <script src="./ajax.js"></script>
    <!-- 引入js -->
    <script src="./js.js"></script>
    <script src="./link.js"></script>
</head>

<body>
    <div class="wrapper">

        <!-- 登录界面 -->
        <form class="logging " action="">
            <h1 class="ti">欢迎登录</h1>
            <!-- 登录标题 -->
            <!-- <div class="logo">登录</div> -->
            <!-- 用户名框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username" type="text" placeholder="用户名" autocomplete='on'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password" type="password" placeholder="密码" autocomplete='on'>
            </div>
            <!-- 翻转按钮 -->
            <div class="tran">没有账号，注册</div>
            <!-- 登录按钮 -->
            <div id="submit" class="submit">登录</div>
            <span> <label class="left">
                <input type="checkbox" id="remember">
                记住密码
            </label>
            <label class="right">
                <input type="checkbox" >
                七天免登录
            </label></span>
        </form>

        <!-- 注册界面 -->
        <form class="logging p hidden" action="">
            <!-- 注册标题 -->
            <h1 class="ti1">注册</h1>
            <!-- 用户名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username_1" type="text" placeholder="用户名" autocomplete='off'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password_1" type="password" placeholder="密码">
            </div>
            <!-- 姓名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-id-card"></i></div>
                <input id="name_1" type="text" placeholder="姓名" autocomplete='off'>
            </div>
            <!-- 电话号码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-phone"></i></div>
                <input id="phone_1" type="text" placeholder="电话号码" autocomplete='off'>
                <!-- 判断电话号码符不符合格式框 -->
                <p id="info"></p>
            </div>
            <span id="ti2"></span>
            <!-- 翻转按钮 -->
            <div class="tran">已有账号，登录</div>
            <!-- 注册按钮 -->
            <div id="submit_1" class="submit" style="position: relative;top: 5px;bottom:10px;">注册</div>
        </form>
        <!-- 弹出新的页面 -->
        <!-- <div class="container111">
            <div class="wrap">
                <h1 class="oo">欢迎登录成功!</h1>

                <button id="submit33">点我查看用户数据</button>
                <button id="submit2">点我上传数据</button>

            </div>

             有多少人就有多少行，根据数组长度动态生成节点 -->
        <!-- <div id="demo">

        </div> -->
        <!-- <ul id="demo1"></ul> -->
        <!-- <script type="text/javascript" src="link.js"></script>
        <script type="text/javascript" src="ajax.js"></script> -->
    </div>
    </div>
    <!-- 记住用户名 -->
    <script>
        var username = document.querySelector('#username');
        var password = document.querySelector('#password');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;

        }
        if (localStorage.getItem('password')) {
            password.value = localStorage.getItem('password');
            remember.checked = true;

        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value);
                localStorage.setItem('password', password.value);
            } else {
                localStorage.removeItem('username');
                localStorage.removeItem('password');
            }
        })
    </script>
</body>

</html>